<template>
  <el-tooltip
      content="修改资料"
      placement="top">
    <el-button @click="openModifyAction" plain :icon="Edit"/>
  </el-tooltip>
  <el-dialog v-model="openModify"
             append-to-body
             title="修改资料"
             width="500">
    <avue-form
        ref="formRef"
        v-model="form"
        @submit="submit"
        :option="userInfoModifyCard"/>
  </el-dialog>
</template>

<script setup>
import {useUserStore} from "@/store/index.js";
import {Edit} from "@element-plus/icons-vue";
import {ref} from "vue";
import {userInfoModifyCard} from "@/views/system/user/js/UserOptions.js";
import {userModify} from "@/views/system/user/js/UserRequest.js";
import {ElMessage} from "element-plus";
import Func from "@/utils/Utils.js";

const userStore = useUserStore();

const openModifyAction = async () => {
  form.value.username = userStore.userInfo.username
  form.value.desc = userStore.userInfo.desc
  openModify.value = true

}
const openModify = ref(false);
const form = ref({});
const formRef = ref(null);

const submit = (form, done) => {
  let clearObject = Func.clearObject(form);
  userModify(clearObject).then(res => {
    if (res.success) {
      openModify.value = false
      userStore.userInfo.username = form.username
      userStore.userInfo.desc = form.desc
      ElMessage.success('修改成功')
    }
  }).finally(() => {
    done()
    formRef.value.resetForm()
  })
}
</script>
